<template>
	<view class="container">
		<image src="/static/image/login_background.jpg" class="background"></image>
		<div class="register-box">
			<div class="logo-title">
				<image src="/static/icon/logo.png" class="logo"></image>
				<div class="logo-text">眼底疾病识别系统</div>
			</div>
			<u--form labelPosition="left" labelWidth="70" :rules="rules" :model="form" ref="uForm">
				<u-form-item label="用户名" prop="username">
					<u--input prefixIcon="account-fill" v-model="form.username" placeholder="请输入用户名" :customStyle="{borderColor: 'blue'}"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="password">
					<u--input prefixIcon="edit-pen-fill" v-model="form.password" placeholder="请输入密码"></u--input>
				</u-form-item>
				<u-form-item label="手机号" prop="phone">
					<u--input prefixIcon="phone" v-model="form.phone" placeholder="请输入手机号"></u--input>
				</u-form-item>
				<u-form-item label="验证码" prop="code">
					<u-input prefixIcon="lock" v-model="form.code" placeholder="请输入验证码">
						<view slot="suffix">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode" :text="tips" type="success" size="mini"></u-button>
						</view>
					</u-input>
				</u-form-item>
			</u--form>
			<div class="submit-btn">
				<u-button type="success" icon="checkbox-mark" text="注册" size="small" style="width: 45%;"></u-button>
				<u-button type="warning" icon="play-right-fill" text="去登陆" size="small" style="width: 45%;" @click="toLogin"></u-button>
			</div>
		</div>
		<u-notify ref="uNotify" message=""></u-notify>
	</view>
</template>

<script>
import { register,getPhoneCode } from '../../../api/login';

	export default {
		data() {
			return {
				tips: '获取验证码',
				form: {
					username: '',
					password: '',
					phone: '',
					code: ''
				},
				rules: {
					username: [{
							required: true,
							message: '请输入用户名',
							trigger: ['blur'],
						},
						{
							require: true,
							message: '用户名长度为5到10位',
							max: 10,
							min: 5,
							trigger: ['blur']
						}
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: ['blur'],
						},
						{
							require: true,
							message: '密码长度为5到10位',
							max: 10,
							min: 5,
							trigger: ['blur']
						}
					],
					phone: [{
							required: true,
							message: '请输入手机号',
							trigger: ['blur'],
						},
						{
							require: true,
							message: '手机号应为11位',
							max: 11,
							min: 11,
							trigger: ['blur']
						}
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['blur'],
						},
						{
							require: true,
							message: '验证码应为4位',
							max: 4,
							min: 4,
							trigger: ['blur']
						}
					]
				}
			}
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				getPhoneCode(this.form.phone).then((res) => {
					if (res.code === 200) {
						this.$refs.uNotify.show({
							type: 'success',
							message: '短信验证码发送成功',
							duration: 1000 * 3,
						})
						this.$refs.uCode.start();
					} else {
						this.$refs.uNotify.show({
							type: 'error',
							message: '短信验证码发送失败',
							duration: 1000 * 3,
						})
					}
				})
			},
			register() {
				register(this.form).then((res) => {
					if (res.code === 200) {
						// 登陆成功 保存token 跳转至首页
						uni.setStorageSync("token", res.data)
						uni.switchTab({
							url: '/pages/index/singleDiagnosis/singleDiagnosis'
						})
						this.$refs.uNotify.show({
							type: 'success',
							message: '注册成功',
							duration: 1000 * 3,
						})
					} else {
						this.$refs.uNotify.show({
							type: 'success',
							message: res.message,
							duration: 1000 * 3,
						})
					}
				})
			},
			toLogin() {
				uni.redirectTo({
					url: '/pages/index/login/login'
				})
			}
		}
	}
</script>

<style>
	@keyframes scaleIn {
	  from {
	    transform: scale(0);
	    opacity: 0;
	  }
	  to {
	    transform: scale(1);
	    opacity: 1;
	  }
	}
	.container {
		width: 100%;
		height: 100vh;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.background {
		width: 100%;
		height: 100%;
		position: absolute;
	}

	.register-box {
		background-color: #fff;
		width: 70%;
		z-index: 99;
		padding: 10px;
		backdrop-filter: blur(10px);
		background-color: rgba(255, 255, 255, 0.85);
		border-radius: 10px;
		border: 1px solid #fff;
		animation: scaleIn 0.3s ease-out forwards;
	}
	
	.logo-title {
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 10px;
	}
	
	.logo {
		width: 30px;
		height: 30px;
	}
	
	.logo-text {
		font-size: 19px;
		font-weight: bold;
	}
	
	.submit-btn{
		display: flex;
		justify-content: space-around;
	}
</style>